<template>
	<view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="data.show"
		@touchmove.stop.prevent>
		<view class="relative">
			<view class="page" v-if="imgs.length > 0">
				<text class="text">{{ data.index + 1 }} / {{ imgs.length }}</text>
			</view>
			<swiper class="swiper" :current="data.index" @change="swiperChange" :circular="circular" >
				<swiper-item class="swiper-item bg-[#D2C5B2]" v-for="(img, i) in imgs" :key="'swiper-item-'+i"
					:id="'swiper-item-'+i">
					<image src="@/assets/images/preview-border.png" class="border-img" v-if="type === 'book'"></image>
					<image src="@/assets/images/previewSealBg.png" class="border-img" v-else></image>
					<view class="three-d-btn" v-if="type !== 'book'"><image src="@/assets/images/a-3Dmoxing.png" /><text>三维</text></view>
					<scroll-view class="w-[1000px] h-[1200px]" scroll-x scroll-y>
						<image class="show-img" :id="'image-'+i" :key="'image-view'+i" :src="img.src" mode="aspectFit"  :class="[scalePix[i] === 1 ? 'absolute top-[50%] left-[50%] transform translate-x-[-50%] translate-y-[-50%]': '']" :style="{ width: scalePix[i] * 90 + '%',
						 height: scalePix[i] * 94 + '%'
						 }"/>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="close-wrap" @click="close">
				<image src="@/assets/images/close.png" class="close-icon"></image>
				<text>关闭</text>
			</view>
			
			<view class="flex flex-col items-center justify-center text-white text-[36px] absolute right-[20px] transform translate-x-[-50%] bottom-[247px]">
					<view class="tip-wrap" @click="changeScalePix(1)" v-if="scalePix[data.index] === 1">
						<image src="@/assets/images/scale-big-icon.png" class="w-[40px] h-[40px]"/>
					</view>
					<view class="tip-wrap mt-[30px]" @click="changeScalePix()" v-else>
						<image src="@/assets/images/scale-small-icon.png" class="w-[40px] h-[40px]"/>
					</view>
				</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		type: {
			type: String,
			default: 'book'
		},
		imgs: {
			//图片列表
			type: Array,
			required: true,
			default: () => {
				return [];
			}
		},
		//透明度,0到1之间。
		opacity: {
			type: Number,
			default: 0.8
		},
		//循环预览
		circular: {
			type: Boolean,
			default: false
		},
		show: {
			type: Boolean,
			default: false
		}
	})
	const data = reactive({
		show: false,
		index: 0, //当前页
	})

	function swiperChange(e) {
		scalePix.value = []
		props.imgs.forEach(v => scalePix.value.push(1))
		data.index = e.detail.current; //更新当前图片index
	}
	function openPreView(index) {
		scalePix.value = []
		props.imgs.forEach(v => scalePix.value.push(1))
		data.show = true
		data.index = index; //更新当前图片index
	}

	function close() {
		data.show = false
		data.index = 0
	}

	const scalePix = ref([])

	
	function changeScalePix(count, i) {
		if(!count) {
			scalePix.value[data.index] = 1
		}else {
			scalePix.value[data.index] = scalePix.value[data.index] + count
		}
	}
	defineExpose({
		openPreView
	})
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.previewImage {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		user-select: none;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.swiper {
			width: 100%;
			height: 1325px;

			.swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				
				.three-d-btn {
					 position: absolute;
					 bottom: 100px;
					 right: 30px;
					 z-index: 10;
					 width: 180px;
					 height: 80px;
					 background: rgba(0,0,0,.3);
					 border-radius: 100px 0px 0px 100px;
					 display: flex;
					 align-items: center;
					 justify-content: center;
					 image {
						 width: 40px;
						 height: 46px;
					 }
					 text {
						 margin-left: 10px;
						 font-size: 32px;
						 color: #fff;
					 }
				}
				.border-img {
					position: absolute;
					top: 30px;
					left: 30px;
					width: calc(100% - 60px);
					height: calc(100% - 60px);
				}

				.show-img {
					width: 90%;
					height: 94%;
				}
			}
		}

		.page {
			width: 100%;
			text-align: center;
			margin-bottom: 38px;

			.text {
				color: #fff;
				font-size: 36px;
				line-height: 1;
				user-select: none;
			}
		}

		.close-wrap {
			width: 130px;
			height: 130px;
			background: url('@/assets/images/flower.png');
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 42px auto 0;
			position: relative;

			&:before {
				position: absolute;
				top: -38px;
				content: '';
				width: 3px;
				height: 43px;
				background: #fff;
			}

			.close-icon {
				width: 28px;
				height: 28px;
			}

			text {
				font-size: 30px;
				line-height: 54px;
				color: #fff;
			}
		}
	}
    .tip-wrap{
			@apply flex items-center justify-center w-[80px] h-[80px] rounded-[50%] bg-[#00000040];
			
			text {
				line-height: 34px;
				border-right: 1px solid;
				@apply  whitespace-nowrap;
			}
		}	
</style>